<template>
  <view>
    <view class="group2 flex-row">
      <image @click="toReflect" class="image3" referrerpolicy="no-referrer"
        src="https://lanhu.oss-cn-beijing.aliyuncs.com/pso555a8mpcnheibp8n5zp9vtrx6z8pqf87b2b1c09-c020-4d51-9c0f-92a6ab2602b1" />
      <text class="text1">添加签署</text>
    </view>
    <view class="page">
      <view class="box_3">
        <!-- pef切图 -->

        <view class="box_4">
          <swiper @change='changeImg' circular indicator-dots="true" vertical='true' circular='true'
            style="height: 1270rpx;">
            <swiper-item v-for="(item,index) in PDFimgs" :key="index">
              <image :src="item.url" mode=""
                style="width: 100%;transform: translateY(-2%);height: 102%;overflow: hidden;"></image>
            </swiper-item>

          </swiper>


          <movable-area class="area" scale-area>
            <movable-view class='move-big' direction="all" inertia out-of-bounds damping="10" friction="0" scale
              @change="onChange">
              <view class="move-box">
                <view class="group_2">
                  {{names}}
                </view>
                <view class="text-wrapper_1">
                  <text lines="1" class="text_4">×</text>
                </view>
              </view>
            </movable-view>
          </movable-area>

          <text lines="1" class="text_2">{{page}}/{{PDFimgs.length||1}}</text>

          <text lines="1" class="text_3">展示合同内容</text>

        </view>
        <view class="box_5">
          <view class="block_1">
            <view class="slide" :class="item.isState?'state':''" v-for="(item,index) in signatory" :key="index"
              @click="changeIsState(item,signatory)">
              <view class="text-wrapper_2">
                <text lines="1" class="paragraph_1">签署方</text><br />
                <text lines="1" class="paragraph_2">{{item.userName}}<br /></text>
              </view>
              <view class="box_6"></view>
            </view>

          </view>
          <text lines="1" class="text_5" @click="toHome()">发送</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        PDFimgs: [], //pdf切图列表
        signatory: [], //签署方与位置
        previewFile: {}, //存放预览合同
        page: 1, //页数
        //服务区带的参数
        param: {
          templateId: "", //文件id
          contractTitle: "", //文件名称
          signUserIdList: [], //签署人
          signLocationList: [] //章位
        }
      }
    },
    onLoad() {
      //添加签署方
      let signUserList = uni.getStorageSync('signUserList')
      signUserList.forEach((item) => {
        item.isState = false, //控制是否选择
          item.llx = null,
          item.lly = null,
          item.page = null
      })
      //本人签署方
      let token = uni.getStorageSync('token')
      let param = {
        isState: true,
        userId: token.userId,
        userName: token.userName,
        userType: token.userType,
        llx: null,
        lly: null,
        page: null
      }
      this.signatory = signUserList
      this.signatory.unshift(param)
    },
    mounted() {
      //获取选中的预览合同
      const previewFile = uni.getStorageSync("file");
      this.previewFile = previewFile
      this.PDFimg()
    },
    methods: {
      //pdf切图
      async PDFimg() {
        let res = await this.$http(`/app/v1/contract/getPdfDrawingImg?fileId=${this.previewFile.fileId}`, 'get')
        // console.log('pdf切图',res)
        if (res.data.code == 200) {
          this.PDFimgs = res.data.data
        }
      },
      changeImg(e) {
        this.page = e.detail.current + 1
        this.signatory.forEach((item) => {
          if (item.isState) {
            item.page = this.page
          }
        })
      },
      onChange(e) {
        // console.log((e.detail.x + 185)/2*5)
        // console.log((100-(e.detail.y + 359 + 200)/2/560)*5)
        this.signatory.forEach((item) => {
          if (item.isState) {
            item.llx = (e.detail.x + 185) / 2 * 5
            item.lly = (100 - (e.detail.y + 359 + 200) / 2 / 560) * 5
            item.page = this.page
          }
        })
      },
      async toHome() {
        //整理参数
        this.param.templateId = this.previewFile.fileId //id
        this.param.contractTitle = this.previewFile.fileName //name

        const location = JSON.parse(JSON.stringify(this.signatory)) //深拷贝整理参数
        location.forEach((item) => {
          delete item.userName
          delete item.phone
          delete item.isState
        })
        this.param.signLocationList = location

        const proson = JSON.parse(JSON.stringify(this.signatory)) //深拷贝整理参数
        proson.forEach((item) => {
          delete item.lly
          delete item.llx
          delete item.page
          delete item.phone
          delete item.isState
        })
        this.param.signUserIdList = proson

        //发请求
        let is = false //判断是否全部选择
        this.param.signLocationList.forEach((item) => {
          if (item.llx) {
            is = true
          } else {
            is = false
          }
        })

        if (is) {
          let res = await this.$http(`/app/fxqApi/createContract`, 'post', this.param)
          if (res.data.code == 200) {
            //成功
            let title = '发起签约成功'
            uni.$showMsg(title)
            uni.redirectTo({
              url:'../sign/sign'
            })
          } else {
            let title = res.data.msg
            uni.$showMsg(title)
          }
        }else{
          let title ="签章位置为空"
          uni.$showMsg(title)
        }

    },
    changeIsState(item, signatory) {
      signatory.forEach((item) => {
        item.isState = false
      })
      item.isState = true
    },
    toReflect() {
      uni.navigateBack({
        delta: 1, //返回层数，2则上上页
      })
    }
  },
  computed: {
    //计算出选中得名字给区分章印
    names() {
      let names = ''
      if (!this.signatory) return
      this.signatory.forEach((item) => {
        if (item.isState) {
          names = item.userName
        }
      })
      return names
    }
  }
  }
</script>

<style>
  .group2 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/ps5isyyq2potdfiptqwd466gus5r8c3u9gdbda77b7-1a54-4592-a767-12fcab94e2b4) 100% no-repeat;
    background-size: 100% 100%;
  }

  .image3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .text1 {
    width: 148rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 301rpx 0 250rpx;
  }

  .move-big {
    position: relative;
    top: 718rpx;
    left: 370rpx;
  }

  .state {
    background-color: antiquewhite;
  }

  .move-box {}

  .slide {
    display: flex;
  }

  .group_2 {
    background-color: rgba(255, 255, 255, 0.680000);
    width: 200rpx;
    height: 200rpx;
    border: 2px dashed rgba(29, 29, 29, 0.68);
    display: flex;
    flex-direction: column;
    color: #ccc;
    align-items: center;
    line-height: 200rpx;
    overflow: hidden;
  }

  .text-wrapper_1 {
    background-color: rgba(204, 204, 204, 0.980000);
    border-radius: 50%;
    height: 40rpx;
    display: flex;
    flex-direction: column;
    width: 40rpx;
    position: relative;
    left: 190rpx;
    top: -230rpx;
  }

  .text_4 {
    width: 16rpx;
    height: 16rpx;
    webkit-text-stroke: 1px rgba(255, 255, 255, 1);
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1.000000);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 9rpx 0 0 9rpx;
  }

  .area {
    position: absolute;
    width: 430rpx;
    height: 1070rpx;
    /* background: lightpink; */
  }





  .page {
    background-color: rgba(255, 255, 255, 1.000000);
    position: relative;
    width: 750rpx;
    height: 1478rpx;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  .box_1 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 56rpx;
    flex-direction: row;
    display: flex;
    justify-content: flex-center;
  }

  .label_1 {
    width: 40rpx;
    height: 24rpx;
    margin: 24rpx 0 0 30rpx;
  }

  .label_2 {
    width: 38rpx;
    height: 24rpx;
    margin: 24rpx 0 0 16rpx;
  }

  .image_1 {
    width: 110rpx;
    height: 24rpx;
    margin: 24rpx 0 0 187rpx;
  }

  .image_2 {
    width: 60rpx;
    height: 20rpx;
    margin: 24rpx 0 0 181rpx;
  }

  .group_1 {
    width: 43rpx;
    height: 20rpx;
    background: url(https://lanhu-dds-backend.oss-cn-beijing.aliyuncs.com/merge_image/imgs/bf724220e634483d96b74c9e84bb9e1c_mergeImage.png) 100% no-repeat;
    background-size: 100% 100%;
    display: flex;
    flex-direction: column;
    margin: 24rpx 30rpx 0 15rpx;
  }

  .box_2 {
    width: 750rpx;
    height: 88rpx;
    background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/pso75g60s5zqbu6qg31iru5prld7kei74e8576fe2-bb12-480d-88f4-46bc866be4ea) 100% no-repeat;
    background-size: 100% 100%;
    flex-direction: row;
    display: flex;
  }

  .image_3 {
    width: 20rpx;
    height: 35rpx;
    margin: 35rpx 0 0 31rpx;
  }

  .text_1 {
    width: 146rpx;
    height: 34rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 37rpx 302rpx 0 251rpx;
  }

  .box_3 {
    background-color: rgba(242, 242, 242, 1.000000);
    width: 750rpx;
    height: 1478rpx;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
  }

  .box_4 {
    background-color: #ffffff;
    border-radius: 10rpx;
    position: relative;
    width: 630rpx;
    height: 1270rpx;
    display: flex;
    flex-direction: column;
    /* margin: 46rpx 0 0 60rpx; */
    /* top: -120rpx; */
    left: 60rpx;
    bottom: 152rpx;
  }

  .text_2 {
    width: 26rpx;
    height: 16rpx;
    overflow-wrap: break-word;
    color: #ccc;
    font-size: 18rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 63rpx 0 0 546rpx;
    position: absolute;
  }

  .text_3 {
    position: absolute;
    width: 444rpx;
    height: 68rpx;
    overflow-wrap: break-word;
    color: rgba(204, 204, 204, 1);
    font-size: 72rpx;
    font-family: Adobe Heiti Std R;
    text-align: left;
    line-height: 24rpx;
    margin: 234rpx 0 0 104rpx;
  }









  .box_5 {
    background-color: rgba(200, 165, 86, 1.000000);
    width: 750rpx;
    height: 100rpx;
    border: 1px solid rgba(200, 165, 86, 1);
    flex-direction: row;
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;

  }

  .block_1 {
    background-color: rgba(255, 255, 255, 1.000000);
    width: 550rpx;
    height: 100rpx;
    display: flex;
    overflow-y: hidden;
    position: fixed;
    bottom: 1rpx;
    left: 1rpx;

  }

  .text-wrapper_2 {
    width: 94rpx;
    height: 52rpx;

    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: SimHei;
    text-align: center;
    line-height: 30rpx;
    margin: 27rpx 0 0 29rpx;
  }

  .paragraph_1 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 30rpx;
  }

  .paragraph_2 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 18rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 30rpx;
  }

  .box_6 {
    background-color: rgba(196, 176, 129, 1.000000);
    width: 2rpx;
    height: 62rpx;
    display: flex;
    flex-direction: column;
    margin: 25rpx 0 0 41rpx;
  }

  .text-wrapper_3 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: SimHei;
    text-align: center;
    line-height: 30rpx;
    margin: 27rpx 0 0 53rpx;
  }

  .paragraph_3 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 30rpx;
  }

  .paragraph_4 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 18rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 30rpx;
  }

  .box_7 {
    background-color: rgba(196, 176, 129, 1.000000);
    width: 2rpx;
    height: 62rpx;
    display: flex;
    flex-direction: column;
    margin: 25rpx 0 0 51rpx;
  }

  .box_8 {
    background-color: rgba(242, 242, 242, 1.000000);
    border-radius: 1rpx;
    width: 2rpx;
    height: 70rpx;
    display: flex;
    flex-direction: column;
    margin: 17rpx 0 0 8rpx;
  }

  .text-wrapper_4 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    font-size: 0rpx;
    font-family: SimHei;
    text-align: center;
    line-height: 30rpx;
    margin: 27rpx 0 0 33rpx;
  }

  .paragraph_5 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 24rpx;
    font-family: SimHei;
    text-align: left;
    line-height: 30rpx;
  }

  .paragraph_6 {
    width: 94rpx;
    height: 52rpx;
    overflow-wrap: break-word;
    color: rgba(29, 29, 29, 1);
    font-size: 34rpx;
    font-family: SimHei;
    text-align: left;

    line-height: 52rpx;
  }

  .box_9 {
    background-color: rgba(196, 176, 129, 1.000000);
    width: 2rpx;
    height: 62rpx;
    display: flex;
    flex-direction: column;
    margin: 25rpx 12rpx 0 33rpx;
  }

  .text_5 {
    width: 69rpx;
    height: 33rpx;
    overflow-wrap: break-word;
    color: rgba(255, 255, 255, 1);
    font-size: 36rpx;
    font-family: SimHei;
    text-align: right;
    white-space: nowrap;
    line-height: 36rpx;
    margin: auto 59rpx auto 622rpx;



  }
</style>
